<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>tiptap nodes &amp; marks 命令大全 - itxst.com</title>
    <meta name="keywords" content="tiptap nodes marks 命令" />
    <meta name="description" content="tiptap nodes节点 &amp; marks标记的命令大全，比如deleteNode删除文档节点命令、创建setMark 标记命令等总计20多个相关命令。" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <meta http-equiv="Content-Language" content="zh-CN">
    <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" />
    <link href="/css/zt.css?ver=1.6.6" rel="stylesheet" type="text/css" media="all" />
    <script type="text/javascript" language="javascript" src="/js/jquery.js?ver=1.6.6"></script>
    <script type="text/javascript" src="/js/highlight/highlight.min.js?ver=1.6.6"></script>
    <link rel="stylesheet" type="text/css" href="/js/highlight/styles/vs2015x.css?ver=1.6.6">
    <script type="text/javascript" language="javascript" src="/js/comm.js?ver=1.6.6"></script>
    <script type="text/javascript" language="javascript" src="/js/zt.js?ver=1.6.6"></script>
    <script type="text/javascript" charset="utf-8" src="/js/layer/layer.js?ver=1.6.6"></script>
    <link rel="alternate" media="only screen and(max-width: 640px)" href="http://m.itxst.com/tiptap/3qbv63ii.html" >
    <!--[if lte IE 9]>
    <script src="/js/respond/respond.js?ver=1.6.6"></script>
    <![endif]-->
</head>
<body>
    <div class="body"  >
        <div class="header">
            <div class="naver">
                <div class="logo">
                    <a href="/"><img src="/img/logov31.png" /></a>
                </div>
                <div class="naver-left">
                 <a href="/tiptap/tutorial.html">tiptap 中文文档</a>
                </div>
                <div class="naver-search">
                    <div class="naver-search-txt">
                        <input type="text" id="keyword" placeholder="Please enter the keyword" data-topic="tiptap">
                    </div>
                    <div class="naver-search-btn"><a href="javascript:void(0)" onclick="Search()">Search</a></div>
                </div>
                 <div class="naver-right"> 
                        <a href="/ag-grid/tutorial.html">AG-GRID</a> 
                        <a href="/tiptap/tutorial.html">Tiptap</a> 
                        <a href="/css-flex/tutorial.html">CSS-FLEX</a> 
                        <a href="/Bootstrap-Table/QuickStart.html">Bootstrap-Table</a> 
                </div>
            </div>
            <div class="path">
                
            </div>
        </div>
        <div class="clearfix"></div>
        <div class="pagew">
        <div class="page" >
            <div class="page-body">
                <div class="content-detail">
                    <h1>tiptap nodes &amp; marks 命令大全</h1>
               
               <p class="pe">tiptap <strong>nodes 节点</strong> &amp; <strong>marks 标记</strong>的命令大全，比如<strong>deleteNode</strong>删除文档节点命令、创建<strong>setMark</strong>标记命令等总计20多个相关命令。</p><h2>clearNodes</h2><p class="pe"><strong>clearNodes</strong> 将节点规范化为<strong>默认节点</strong>，默认情况下是段落，它甚至可以规范化所有类型的列表,它可以在应用新节点类型之前派上用场,如果无法理解请先看 <strong>node 节点</strong>相关的文档。</p><pre class="brush:js;toolbar:false"><code class="language-javascript">editor.commands.clearNodes();</code></pre><h2>createParagraphNear</h2><p class="pe">在选中节点后面创建一个空段落，如果选中的节点是同级节点的第一个节点，那么会插入到它前面。</p><pre class="brush:js;toolbar:false"><code class="language-javascript">editor.commands.createParagraphNear();</code></pre><h2>deleteNode</h2><p class="pe">删除选中节点参数 typeOrName:<strong> string | NodeType</strong> 参数可以是字符串或查找需要删除的节点</p><pre class="brush:js;toolbar:false"><code class="language-javascript">// deletes a paragraph node
editor.commands.deleteNode('paragraph')
// or
// deletes a custom node
editor.commands.deleteNode(MyCustomNode)</code></pre><h2>deleteRange</h2><p class="pe">删除制定区域的内容</p><pre class="brush:js;toolbar:false"><code class="language-javascript">// 删除1到10区间的内容
editor.commands.deleteRange({ from: 1, to: 10 })</code></pre><h2>deleteSelection</h2><p class="pe">删除选中的内容</p><pre class="brush:js;toolbar:false"><code class="language-javascript">editor.commands.deleteSelection()</code></pre><h2>enter</h2><p class="pe">触发一个回车命令</p><pre class="brush:js;toolbar:false"><code class="language-javascript">editor.commands.enter()</code></pre><h2>exitCode</h2><p class="pe">如果当前选择是一个代码段落(code / pre)，exitCode命令将在当前选择之后创建一个默认块，并将光标移动到新的块上。</p><pre class="brush:js;toolbar:false"><code class="language-javascript">editor.commands.exitCode()</code></pre><h2>extendMarkRange</h2><p class="pe">extendMarkRange 扩展当前的选择以包含当前标记，如果当前选择没有特定的标记，则不会更改任何内容。</p><pre class="brush:js;toolbar:false"><code class="language-javascript">// Expand selection to link marks
editor.commands.extendMarkRange('link')

// Expand selection to link marks with specific attributes
editor.commands.extendMarkRange('link', { href: 'https://itxst.com' })

// Expand selection to link mark and update attributes
editor
  .chain()
  .extendMarkRange('link')
  .updateAttributes('link', {
    href: 'https://www.itxst.com'
  })
  .run()</code></pre><h2>joinBackward</h2><p class="pe">joinBackward将尝试减少该块与其之前的块之间的距离,如下使示，当光标在abc前面或空的p标签里面执行该命令将清除这个空的p标签</p><pre class="brush:html;toolbar:false;"><code class="language-html">&lt;!-- 示例 --&gt;
&lt;p&gt; www.itxst.com&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;abc&lt;/p&gt;
&lt;!-- 执行命令 --&gt;
editor.commands.joinBackward()</code></pre><h2>joinForward</h2><p class="pe"><strong>joinBackward</strong>将尝试减少该块与其之前的块之间的距离,如下使示，当光标在.com后面或空的p标签里面执行该命令将清除这个空的p标签</p><pre class="brush:js;toolbar:false"><code class="language-javascript">&lt;!-- 示例 --&gt;
&lt;p&gt; www.itxst.com&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;abc&lt;/p&gt;
&lt;!-- 执行命令 --&gt;
editor.commands.joinBackward()</code></pre><h2>lift</h2><p class="pe"><strong>lift</strong>命令将将选中节点移动到当前的父块的同级中,请看以下例子</p><pre class="brush:js;toolbar:false"><code class="language-javascript">/* 
 如果编辑器的内容如下,当鼠标在"abc"这个p标签内时
 &lt;ul&gt;&lt;li&gt;&lt;p&gt;abc&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p&gt;itxst&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;
  执行 state.editor.commands.lift('bulletList') 
  结果编辑器的内容会变成如下内容
  &lt;p&gt;abc&lt;/p&gt;&lt;ul&gt;&lt;li&gt;&lt;p&gt;itxst&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;
*/</code></pre><h2>liftEmptyBlock</h2><p class="pe"><strong>liftEmptyBlock</strong>命令将选中的空块移动到当前的父块中,请看以下例子</p><pre class="brush:js;toolbar:false"><code class="language-javascript">// 如果编辑器的内容如下,当鼠标在第一个空p标签内时
//&lt;ul&gt;&lt;li&gt;&lt;p&gt;&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p&gt;itxst&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;
// 执行 state.editor.commands.liftEmptyBlock('bulletList') 
// 结果编辑器的内容会变成如下内容
// &lt;p&gt;&lt;/p&gt;&lt;ul&gt;&lt;li&gt;&lt;p&gt;itxst&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;</code></pre><h2>newlineInCode</h2><p class="pe">如果编辑器内容是代码块<strong>code标签</strong>，执行该命令将会在光标位置新起一行,如果不知道什么是html code标签请自行搜索相关知识。</p><pre class="brush:js;toolbar:false"><code class="language-javascript">state.editor.commands.newlineInCode()</code></pre><h2>resetAttributes</h2><p class="pe"><strong>resetAttributes</strong>将节点属性重置回默认属性。</p><pre class="brush:js;toolbar:false"><code class="language-javascript">// reset the style and class attributes on the currently selected paragraph nodes
editor.commands.resetAttributes('paragraph', ['style', 'class'])</code></pre><h2>setMark</h2><p class="pe"><strong>setMark</strong>命令将在当前选择处添加一个新标记。</p><pre class="brush:js;toolbar:false"><code class="language-javascript">// 将选中内容加上超链接
editor.commands.setMark("link",{ href: 'https://www.itxst.com' })</code></pre><h2>setNode</h2><p class="pe"><strong>setNode</strong>将选中节点替换成指定节点</p><pre class="brush:js;toolbar:false"><code class="language-javascript">// 编辑器内容 &lt;ul&gt;&lt;li&gt;abc&lt;/li&gt;&lt;/ul&gt;
// 执行命令
state.editor.commands.setNode("paragraph")
// 执行后内容变成 &lt;p&gt;abc&lt;/p&gt;</code></pre><h2>splitBlock</h2><p class="pe"><strong>splitBlock</strong>将当前选择的节点拆分为两个节点，如果当前选择的节点不可分割，则该命令将被忽略。</p><pre class="brush:js;toolbar:false"><code class="language-javascript">// 拆分当前节点 保留 marks
editor.commands.splitBlock()

// 拆分当前节点 不保留 marks
editor.commands.splitBlock({ keepMarks: false }</code></pre><h2>toggleMark</h2><p class="pe"><strong>toggleMark</strong>前选择中打开或关闭特定的标记。</p><pre class="brush:js;toolbar:false"><code class="language-javascript">// 如果第一次点击将选中内容加粗，那么再次点击选中内容将取消粗体
editor.commands.toggleMark('bold')

// toggles bold mark with a color attribute
editor.commands.toggleMark('bold', { color: 'red' })

// toggles a bold mark with a color attribute and removes the mark across the current selection
editor.commands.toggleMark('bold', { color: 'red' }, { extendEmptyMarkRange: true }))</code></pre><h2>toggleNode</h2><p class="pe"><strong>toggleNode</strong>将选中节点转换成制定节点，比如第一次点击将选中<strong>p标签</strong>转换成<strong>h1标签</strong>，那么再次点击h1标签转换回p标签</p><pre class="brush:js;toolbar:false"><code class="language-javascript">// 如果第一次点击将选中p标签转换成h1标签，那么再次点击h1标签转换回p标签
state.editor.commands.toggleNode('heading',"paragraph")

// toggle a paragraph with a heading node
editor.commands.toggleNode('paragraph', 'heading', { level: 1 })

// toggle a paragraph with a image node
editor.commands.toggleNode('paragraph', 'image', { src: 'https://example.com/image.png' })</code></pre><h2>toggleWrap</h2><p class="pe"><strong>toggleWrap</strong>使用新节点包裹当前节点或删除包裹节点。</p><pre class="brush:js;toolbar:false"><code class="language-javascript">/*
 加上编辑器内容如下
  &lt;p&gt;abc&lt;/p&gt; 
 执行下面命令将会用listitem节点包裹paragraph节点（p标签）
  state.editor.commands.toggleWrap('listItem') 
 执行后编辑器内容如下
   &lt;ul&gt;&lt;li&gt;&lt;p&gt;abc&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;
 再次执行将会恢复p标签
 */</code></pre><h2>undoInputRule</h2><p class="pe">undoInputRule将撤消最近触发的输入规则</p><pre class="brush:js;toolbar:false"><code class="language-javascript">editor.commands.undoInputRule()</code></pre><h2>unsetAllMarks</h2><p class="pe"><strong>unsetAllMarks</strong>将选中内容的所有 <strong>marks</strong> 标记移除</p><pre class="brush:js;toolbar:false"><code class="language-javascript">editor.commands.unsetAllMarks()</code></pre><h2>unsetMark</h2><p class="pe"><strong>unsetMark</strong>将选中内容的 <strong>mark 标记</strong> 移除</p><pre class="brush:js;toolbar:false"><code class="language-javascript">editor.commands.unsetMark()</code></pre><h2>updateAttributes</h2><p class="pe"><strong>updateAttributes</strong>更新 <strong>node 节点</strong> <strong>mark 标记</strong> 的属性</p><pre class="brush:js;toolbar:false"><code class="language-javascript">// 更新节点 node 属性
editor.commands.updateAttributes('heading', { level: 1 })

// 更新标记 mark 属性
editor.commands.updateAttributes('highlight', { color: 'pink' })</code></pre>
 
               <h2>
    下载教程 Demo
</h2>
<p class="pe">
   本教程<b>Demo</b>的源码点击这里下载，<a href="https://img1.itxst.com/8/c/8c32fcdc12cb8847c62e405be8a73835.zip" target="_blank" textvalue="Tiptap Demo">Tiptap Demo</a>，下载完成后运行<b>npm i</b>初始化依赖包。
</p>
                </div>
                <div class="content-r">   <a href="/tiptap/tutorial.html" target="_self">
                     <img src="https://img1.itxst.com/0/9/09355b3592a0c16799b504a9f2a70303.png" alt="tiptap 中文文档" />
                    </a>                                                <a href="//www.itxst.com/vue-draggable/tutorial.html" target="_blank">
                                <img src="//img1.itxst.com/b/f/bf9af8368dfac84cd703ef54e1e89d14.png" alt="vue.draggable" />
                            </a>
 
                </div>
            </div>
            <div class="home-menu scroll">
                <div class="tree">
      <a data-level="1" class="leve-1   doc-1   " href="/tiptap/tutorial.html" title="tiptap 中文文档">快速入门</a>
      <a data-level="1" class="leve-1    arrow-1" href="/tiptap/configuration.html" title="Guide 向导">Guide 向导</a>
      <a data-level="1" class="leve-1    arrow-2" href="/tiptap/api.html" title="tiptap api 列表">API 列表</a>
      <a data-level="2" class="leve-2   doc-1   " href="/tiptap/methods.html" title="tiptap editor 方法">tiptap 方法</a>
      <a data-level="2" class="leve-2   doc-1   " href="/tiptap/attrs.html" title="tiptap 属性">tiptap 属性</a>
      <a data-level="2" class="leve-2   doc-1   " href="/tiptap/settings.html" title="titap 配置">titap 配置</a>
      <a data-level="2" class="leve-2    arrow-2" href="/tiptap/uaqmeemr.html" title="tiptap commands 命令">commands 命令</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/uaqmeemr.html" title="tiptap commands 命令介绍">commands 命令介绍</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/rvvain7z.html" title="tiptap content 文档命令">content 文档命令</a>
      <a data-level="3" class="leve-3   doc-1    doc-2 " href="/tiptap/3qbv63ii.html" title="tiptap nodes &amp; marks 命令大全">nodes &amp; marks 命令</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/ueriebja.html" title="tiptap lists 命令">lists 命令</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/selection.html" title="tiptap selection 命令">selection 命令</a>
      <a data-level="2" class="leve-2    arrow-1" href="/tiptap/363qzvqv.html" title="nodes 节点">nodes 节点</a>
      <a data-level="2" class="leve-2    arrow-1" href="/tiptap/marks.html" title="tiptap marks 标记">marks 标记</a>
      <a data-level="2" class="leve-2    arrow-1" href="/tiptap/extensions.html" title="tiptap extensions 扩展">extensions 扩展</a>
                 </div>
                 <div  class="clearfix"></div>
            </div>
        </div>
        <div class="clearfix"></div>
           <div class="footer">
© 2023 itxst.com All rights reserved.
</div>

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?7e15ed96eb8133218e99de8bc1f5cb61";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>
       </div>
    </div> 
</body>
</html>
